<template>
  <div>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="i in films" :key="i.filmId">
          <img class="posterimg" :src="i.poster" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
export default {
  props: ["films"],
  updated() {
    //重新加载的时候在获取，因为是异步
    this.$store.commit('changefilmid',this.films[0].filmId)//第一个图片的id
    var idstart=''
    this.films.forEach((i,index)=>{
      console.log('ff',i.filmId,index,this.$store.state.sendfilm.filmid)
      if(i.filmId == this.$store.state.sendfilm.filmid){
        idstart = index
      }else{idstart=0}
      console.log()
    })
    console.log(idstart)
    let _this =this
    var swiper = new Swiper(".swiper-container", {
      slidesPerView: 3.5,
      spaceBetween: 10,
      centeredSlides: true,
      loop: false,
      initialSlide :idstart,
      on: {
        slideChangeTransitionEnd: function() {
        //  this.activeIndex //切换结束时，告诉我现在是第几个slide
          _this.$store.commit('changefilmid',_this.films[this.activeIndex].filmId)
        }
      }
    });
  }
};
</script>
<style scoped>
.swiper-container {
  height: 3.2rem;
  margin-top: 0.3rem;
}

.swiper-slide {
  height: 3.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
.posterimg {
  height: 2.6rem;
  width: 1.8rem;
}
</style>